<?php include('../include/head.php'); ?>
<body>
	<!-- 头部导航 -->
	<?php include('../include/header.php'); ?>
	<section class="main">
		<div class="movie large border first">
			<div class="movie-bg"></div>
			<div class="custom_bg lazyloaded">
				<div class="container single_column">
					<div class="row">
						<section class="images inner">
							<div class="col-xs-12 col-sm-4">
								<div class="poster">
									<div class="image_content">
      									<img src="/dome/movie/images/loading.gif">
          							</div>
								</div>
							</div>
							<div class="col-xs-12 col-sm-8 movie-detail">
							    <div class="title" id="movie-name"></div>
							    <div class="pad">
							        <h3>Overview</h3>
							        <div class="overview">
							            <p></p>
							        </div>
							        <h3 class="featured">Featured Crew</h3>
							        <div class="crew-list" id="crew-list"></div>
							        <script id="crew-list-t" type="text/html">
										<ol class="people no_image">
											<%for(var i=0; i<crew.length; i++){%>
										        <li class="col-xs-6 col-sm-4 col-md-2">
									            	<p><%=crew[i].name%></p>
									            	<p class="character"><%=crew[i].department%></p>
												</li>
												<%if (i==11){break};%>
									    	<%}%>
										</ol>
									</script>
							    </div>
							</div>
						</section>
						<section class="top_billed">
						    <h3>Top Billed Cast</h3>
						    <div id="cast-list"></div>
						    <script id="cast-list-t" type="text/html">
								<ol class="people">
									<%for(var i=0; i<cast.length; i++){%>
								    	<%if (cast[i].profile_path){%>
								        <li class="col-xs-6 col-sm-4 col-md-2">
								         	<img class="lazy" data-original="https://image.tmdb.org/t/p/w132_and_h132_bestv2/<%=cast[i].profile_path%>" src="/dome/movie/images/loading.gif" alt="">
							            	<p><%=cast[i].name%></p>
							            	<p class="character"><%=cast[i].character%></p>
										</li>
										<%}%>
										<%if (i==11){break};%>
							    	<%}%>
								</ol>
							</script>
						</section>
						<section class="videos">
						    <h3>Videos</h3>
						    <div id="video-list"></div>
						    <script id="videos-list" type="text/html">
						    	<ul class="video">
								<%for(var i=0; i<results.length; i++){%>
							        <li class="col-xs-12 col-sm-6">
							         	<iframe class="video-item" type="text/html" src="//www.youtube.com/embed/<%=results[i].key%>?enablejsapi=1&autoplay=0&origin=https%3A%2F%2Fwww.themoviedb.org&hl=en-US&modestbranding=1&fs=1" frameborder="0" allowfullscreen></iframe>
									</li>
									<%if (i==5){break};%>
						    	<%}%>
						    	</ul>
							</script>
						</section>
					</div>
				</div>
			</div>
		</div>
		<div class="recommend movies-list-wrap mlw-latestmovie">
			<div class="container">
				<div class="row">
					<div class="hd ml-title">
						<span class="pull-left">YOU MAY ALSO LIKE <i class="iconfont icon-right"></i></span>
					</div>
					<div class="bd movies-list-container" id="you-like"></div>
					<script id="movie-list" type="text/html">
						<ul class="ml-list">
						    <%for(var i=0; i<results.length; i++){%>
					         <li class="ml-item" data-movie-id="<%=results[i].id%>">
								<span class="mli-quality">HD</span><a class="ml-mask jt" data-movie-id="<%=results[i].id%>" title="<%=results[i].title%>" href="/dome/movie/movie?<%=results[i].id%>" target="_blank"><img class="lazy" data-original="https://image.tmdb.org/t/p/w185_and_h278_bestv2/<%=results[i].poster_path%>" src="/dome/movie/images/loading.gif" alt=""></a>
							</li>
							<%if (i==15){break};%>
							<%}%>
						</ul>
					</script>
				</div>
			</div>
		</div>
	</section>
	<?php include('../include/footer.php'); ?>
	<script>
		jQuery(function() {
			var movieId = location.search; //获取url中"?"符后的id
				movieId = movieId.substring(1,movieId.Length);
			console.log(movieId);
	     	$("img.lazy").lazyload({effect : "fadeIn"});
	     	tmdb.call("/movie/"+movieId, {"language":"en-US"},                       //获取电影的详细信息
			  function(e){
			  	$("div.movie-bg").css("background-image","url(https://image.tmdb.org/t/p/w1300_and_h730_bestv2"+e.backdrop_path+")");
			  	$(".image_content").html("<img src='https://image.tmdb.org/t/p/w500"+e.poster_path+"'>");
			  	$("#movie-name").html("<h2>"+e.title+"<span class='release_date'>("+e.release_date.substring(0,4)+")</span></h2>");
			  	if(e.overview){
			  		$(".overview").html("<p>"+e.overview+"</p>");
			  	}else{
			  		$(".overview").html("<p>no</p>");
			  	};
			  	
			  }, 
			  function(e){
			  }
			);
			tmdb.call("/movie/"+movieId+"/credits", {"language":"en-US"},               //获取电影的演员表
			  function(e){
			  	castHtml = template('cast-list-t', e);
				crewHtml = template('crew-list-t', e);
				document.getElementById('cast-list').innerHTML = castHtml;
				document.getElementById('crew-list').innerHTML = crewHtml;
				$("img.lazy").lazyload({effect : "fadeIn"});
			  }, 
			  function(e){
			  }
			);

			tmdb.call("/movie/"+movieId+"/videos", {"language":"en-US"},               //获取电影的视频
			  function(e){
				videosHtml = template('videos-list', e);
				$('#video-list').html(videosHtml);
			  }, 
			  function(e){
			  }
			);

			tmdb.call("/movie/"+movieId+"/similar", {"language":"en-US"},               //获取电影的关联电影
			  function(e){
			  	if(e.total_results==0){
			  		$(".recommend").hide();
			  		return false;
			  	}
			  	html = template('movie-list', e);
				document.getElementById('you-like').innerHTML = html;
				if (!jQuery.browser.mobile) {
			        $('.jt').qtip({
			            content: {
			                text: function (event, api) {
								$getMovieDetail(api.elements.target.attr('data-movie-id'),function(html){
									api.set('content.text', html);
								})
								return 'Loading...'; // 设置默认文字
			                },
			                title: function (event, api) {
			                    return $(this).attr('title');
			                }
			            },
			            position: {
					        my: 'top left',
					        at: 'top right',
					        viewport: $("#movies-list-box"),
							effect: false,
					        target: 'mouse',
					        adjust: {
			                    mouse: false
			                },
			                show: {
			                    effect: false
			                }
						},
						hide: {
			                fixed: true
			            },
			            style: {
			                classes: 'qtip-light qtip-bootstrap',
			                width: 320
			            }
			        });
			    }
				$("img.lazy").lazyload({effect : "fadeIn"});
			  }, 
			  function(e){
			  }
			);
	  	});
	  	
	</script>
</body>
</html>